<template>
    <div class="container" v-if="flagShow">
      <div class="contain-header">
        <input type="search" class="search" placeholder="Search" v-model="keyWord">
      </div>
      <div class="contain-main">
       <el-table :data="tableData" border style="width: 88%" v-loading="loading">
           <el-table-column prop="DF03000" label="编号" width="220" />
           <el-table-column prop="TitleMark" label="标题备注" />
           <el-table-column prop="StrCT050" label="创建日期" width="220"/>
           <el-table-column prop="StrMT050" label="修改日期" width="220"/>
           <el-table-column prop="NumAL040" label="AL"  width="50" />
           <el-table-column prop="NumTE030" label="TE"  width="50"/>
           <el-table-column  label="操作" width="120">
               <template #default="{row}">
               <a href="javascript:;" @click="handleExitData(row)">编辑</a>
               <a href="javascript:;" @click="handleDeleteData(row)">删除</a>
              </template>
          </el-table-column>
       </el-table>
       <el-pagination
         background
         layout="prev, pager, next"
         :total="jsonPaging.totalItem"
         class="mt-4"
         @current-change="handleCurrentChange"
         :page-size="jsonPaging.PageSize"
         />
      </div>
      <div class="contain-footer">
        <a href="javascript:;" @click="handleCreateNew">新建文章</a>
      </div>
    </div>
    <RouterView v-else></RouterView>
</template>

<script setup>
import { getCurrentInstance,onMounted,ref,watch} from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus'
const {proxy}=getCurrentInstance();

let flagShow=ref(true),loading = ref(true);
let tableData = ref([]);
let keyWord=ref('');
const jsonPaging=ref({
  totalItem:0,
  PageIndex:1,
  PageSize:14,
})

//初始列表
currentChange();
//页数变化渲染文章列表
function handleCurrentChange(currentPage){
  jsonPaging.value.PageIndex=currentPage;
  currentChange();
}
function currentChange(){
  loading.value=true;
  let reqParams={PageIndex:jsonPaging.value.PageIndex,PageSize:jsonPaging.value.PageSize};
  if(keyWord.value.length>0){
    reqParams.Keyword=keyWord.value;
   }
const promiseReq=proxy.$HelperAxios.post('/DataAccessWithGroup/QueryPagingList',reqParams
  ).then((Request)=>{
    if (Request.status === 200) {
      if (Request.data.StatusCode ==="SuccGoal") {
        loading.value=false;
        tableData.value=Request.data.Payload.DataList;
        jsonPaging.value.totalItem=Request.data.Payload.NumRowQuantity;
      }else{
        setTimeout(()=>{
        loading.value=false;
          alert('请求失败')
        },6000)
        }
    }else{
        setTimeout(()=>{
        loading.value=false;
          alert('请求失败')
        },6000)}
  }).catch((erro)=>{
    loading.value=false;
    tableData.value= [];
  })
  return promiseReq
}

//search 搜索文章
const handleSearchKeyword=proxy.$HelperCore.handleDebounce((vaIn)=>{
    jsonPaging.value.totalItem=0;
    jsonPaging.value.PageIndex=1;
    currentChange();
},1000)
watch(
   ()=>keyWord.value,
   (newValue,oldValue)=>{
    handleSearchKeyword(newValue);
})

//文章删除
function handleDeleteData(row){
  ElMessageBox.confirm(
    'Do you want to delete this article?',
    'Warning',
    {
      confirmButtonText: 'Yes',
      cancelButtonText: 'Cancel',
      type: 'warning',
    }
  ).then(() => {
      ElMessage({
        type: 'success',
        message: 'Delete completed',
      })
      // proxy.$HelperCore.cssFuncMask(true,20,null)
      proxy.$HelperAxios.delete('/DataAccessWithGroup/DeleteDataRow',{params:{StrPrimaryKey:row.StrPK010}}
      ).then((request)=>{
      // proxy.$HelperCore.cssFuncMask(false,0,null)
      if (request.status === 200) {
        if (request.data.StatusCode ==="SuccGoal") {
          jsonPaging.value.PageIndex=1;
          jsonPaging.value.totalItem=0;
          currentChange();
      }else{alert('请求错误')}
     }else{alert('请求错误')}})
  }).catch(() => {
      ElMessage({
        type: 'info',
        message: 'Delete canceled',
      })
    })
}

//点击新建文章
function handleCreateNew(){
  proxy.$HelperAxios.post('/DataAccessWithGroup/CreateDataRow',{TitleMark:'Do You Want to Build a Snowman',ActionId:'InsertData'}
    ).then((request)=>{
      if (request.status === 200) {
      if (request.data.StatusCode ==="SuccGoal") {
        proxy.$router.push({path:'/LayoutViewSystemMgt/DetailedDataTextarea',query:{StrPrimaryKey:request.data.Payload}});//跳转到编辑页
        currentChange();
      }else{alert('请求错误')}
  }else{alert('请求错误')}
})
}

//文章编辑
function handleExitData(row){
  flagShow.value=!flagShow.value;
  proxy.$router.push({path:'/LayoutViewSystemMgt/DetailedDataTextarea',query:{StrPrimaryKey:row.StrPK010}});//跳转到编辑页
}

// Debounce (防抖): 每次触发事件时设置延迟调用函数，在此期间取消以前触发的事件.
function handleDebounce(funcFollowIn, numDelayIn) {
    let timerInner = null;
    return (...args) => {
        if (timerInner) clearTimeout(timerInner);
        timerInner = setTimeout(() => {
            funcFollowIn.apply(this, args);
        }, numDelayIn);
    };
}
// Throttle (节流): 事件占用一个时间段, 在此时间段内不会再接受事件触发.
function handleThrottle(funcFollowIn, numDelayIn) {
    let timerInner = null;
    return (...args) => {
        if (!timerInner) {
            timerInner = setTimeout(() => {
                funcFollowIn.apply(this, args);
                timerInner = null;
            }, numDelayIn);
        }
    };
}
</script>

<style scoped>
.example-showcase .el-loading-mask {
  z-index: 9;
}
.container{
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* position: relative; */
}
.contain-header{
    width: 100%;
    height: 50px;
    border-bottom: 1px solid #eaedf2;
    line-height: 50px;
}
.search{
    border-color: #eaedf2;
    outline-color:none;
    width: 300px;
    height: 30px;
    margin-left: 30px;
    text-indent: 10px;
}
.contain-main{
    padding: 20px 0 0 30px;
}
::v-deep .el-table__header{
    background-color: red;
}
.operation{
    display: flex;
    justify-content: space-between;
}
::v-deep .el-table th.el-table__cell{
  background-color: #eff2f5;
}
::v-deep .cell{
  display: flex;
  justify-content: space-around;
}
.el-pagination{
    margin: 20px 0;
}
.contain-footer{
    padding:20px;
    /* position: absolute;
    left: 0;
    bottom: 0; */
    height: 30px;
    width: 100%;
    background-color: #eff2f5;
    display: flex;
    align-items: center;
    justify-content: right;                   
}


</style>